/* =========================================================
   BRAND COLORS
========================================================= */

:root {

  --brand-blue: #236192;

  --brand-blue-dark: #102f4d;

  --brand-red: #6f263d;

  --brand-red-dark: #501c2d;

  --dark-bg: #221f1f;

  --white: #ffffff;

  --black: #000000;

}


/* =========================================================
   PAGE RESET
========================================================= */

html,
body {

  margin: 0;

  padding: 0;

  overflow-x: hidden;

  min-height: 100%;

}


body {

  background-color: var(--white);

}


/* =========================================================
   HEADER
========================================================= */

header {

  background-color: var(--brand-blue);

}


header img {

  display: block;

  width: 100%;

  border-bottom: 5px solid var(--brand-red);

}


/* =========================================================
   HEADINGS
========================================================= */

h1,
h2,
h3,
h4 {

  color: var(--brand-red);

  font-weight: bold;

}


h1 {

  font-size: 2.75rem;

}


h2 {

  font-size: 2.25rem;

}


h3,
h4 {

  font-size: 2rem;

}


.section-title {

  color: var(--brand-blue);

  margin-bottom: 1rem;

  font-weight: bold;

}


hr {

  border: 0;

  border-top: 2px solid var(--brand-red);

  margin: 0;

}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {

  background-color: var(--black) !important;

  padding: 0.75rem 1rem;

}


.navbar .navbar-brand img {

  height: 50px;

}


.navbar .navbar-brand + img {

  height: 30px;

}


.navbar-nav {

  gap: 1rem;

  align-items: center;

  flex-wrap: wrap;

}


.navbar-toggler-icon {

  width: 1.5em;

  height: 1.5em;

  background-image: url('https://kseblobstorage.blob.core.windows.net/sitefiles/Avalanchetix/menu.png') !important;

}


.nav-link,
.nav-link-custom {

  color: var(--white) !important;

  font-weight: 600;

  font-size: 0.95rem;

  text-transform: uppercase;

  white-space: nowrap;

  padding: 0.5rem 0.75rem;

  transition:
    color .2s ease-in-out,
    background-color .2s ease-in-out;

  border-radius: 4px;

}


.nav-link:hover,
.nav-link:focus,
.nav-link-custom:hover,
.nav-link-custom:focus {

  color: var(--white) !important;

  background-color: var(--brand-blue);

}


.nav-link-custom.active {

  background-color: var(--brand-blue);

  color: var(--white) !important;

}


.dropdown-menu {

  background-color: var(--black);

  border: none;

  border-radius: 4px;

  padding: 0.5rem 0;

}


.dropdown-item {

  color: var(--white);

  font-weight: 500;

  padding: 0.5rem 1.25rem;

  transition:
    background-color .2s,
    color .2s;

}


.dropdown-item:hover {

  background-color: #222;

  color: var(--brand-blue);

}


.navbar-light {

  background-color: var(--black) !important;

}


/* =========================================================
   THEME NIGHT SECTION
========================================================= */

.games-wrapper {

  width: 100%;

  padding: 55px 0 65px;

  background:
    linear-gradient(
      180deg,
      #f4f8fb 0%,
      #e7eef5 100%
    );

}


/* =========================================================
   THEME NIGHT CARDS
========================================================= */

.game-card {

  background-color: var(--white);

  border: 0;

  border-top: 5px solid var(--brand-red);

  border-radius: 14px;

  overflow: hidden;

  box-shadow:
    0 8px 25px rgba(16, 47, 77, 0.13),
    0 2px 8px rgba(0, 0, 0, 0.06);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}


.game-card:hover {

  transform: translateY(-5px);

  box-shadow:
    0 16px 35px rgba(16, 47, 77, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.07);

}


.game-card .card-img-top {

  width: 100%;

  height: auto;

  display: block;

}


.game-card .card-body {

  padding: 1.5rem 1.5rem 1.6rem;

}


/* =========================================================
   THEME / GAME INFORMATION
========================================================= */

.theme-name {

  min-height: 3.5rem;

  margin: 0 0 0.55rem;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.45rem;

  line-height: 1.2;

  font-weight: 800;

  color: var(--brand-blue-dark);

}


.game-date {

  margin: 0 0 0.25rem;

  font-size: 1.08rem;

  line-height: 1.3;

  font-weight: 700;

  color: #242424;

}


.game-opponent {

  margin: 0;

  font-size: 1.25rem;

  line-height: 1.25;

  font-weight: 700;

  color: var(--brand-red);

}


.game-time {

  margin: 0.6rem 0 1.25rem;

  font-size: 1.05rem;

  line-height: 1.2;

  font-style: italic;

  color: #5d6470;

}


/* =========================================================
   STANDARD BUTTONS
========================================================= */

.btn-primary {

  background-color: var(--brand-red) !important;

  border-color: var(--brand-red) !important;

  color: var(--white) !important;

}


.btn-primary:hover,
.btn-primary:focus {

  background-color: var(--brand-red-dark) !important;

  border-color: var(--brand-red-dark) !important;

}


.game-ticket-button {

  width: 100% !important;

  padding: 0.7rem 1rem !important;

  border-radius: 8px !important;

  font-size: 1.05rem !important;

  font-weight: 600 !important;

}


/* =========================================================
   SPINZO BUTTONS
========================================================= */

.game-card
.spinzoButton.spinzoClientOverride.game-ticket-button {

  display: block !important;

  width: 100% !important;

  background-color: var(--brand-red) !important;

  border: 1px solid var(--brand-red) !important;

  color: var(--white) !important;

  padding: 0.7rem 1rem !important;

  border-radius: 8px !important;

  font-size: 1.05rem !important;

  font-weight: 600 !important;

  cursor: pointer !important;

}


.game-card
.spinzoButton.spinzoClientOverride.game-ticket-button:hover,
.game-card
.spinzoButton.spinzoClientOverride.game-ticket-button:focus {

  background-color: var(--brand-red-dark) !important;

  border-color: var(--brand-red-dark) !important;

  color: var(--white) !important;

}


/* =========================================================
   GOVX SECTION
========================================================= */

.govx-wrapper {

  padding: 60px 0;

  background-color: var(--white);

}


.govx-card {

  background-color: var(--white);

  border-radius: 14px;

  padding: 1.5rem;

  box-shadow:
    0 8px 25px rgba(16, 47, 77, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.05);

}


.govx-card img {

  border-radius: 10px;

}


.govx-card h2 {

  color: var(--brand-blue-dark);

  font-size: 1.8rem;

  margin-bottom: 0.75rem;

}


/* =========================================================
   CONTACT
========================================================= */

#contact-us-section {

  padding-top: 50px;

  padding-bottom: 50px;

}


/* =========================================================
   FOOTER
========================================================= */

footer {

  background-color: var(--dark-bg);

  color: var(--white);

  padding-top: 25px;

  padding-bottom: 25px;

  margin-bottom: 0;

}


.footer-link {

  color: var(--white);

  text-decoration: none;

  transition: color .3s;

}


.footer-link:hover {

  color: #7eb9e6;

}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.social-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin: 0 10px;

  font-size: 1.5rem;

  color: var(--white);

  text-decoration: none;

  transition:
    color .3s,
    transform .3s;

}


.social-icon:hover {

  color: #7eb9e6;

  transform: scale(1.15);

}


.social-icon i,
.social-icon svg {

  display: block;

  width: 1.5rem;

  height: 1.5rem;

  vertical-align: middle;

}


.social-icon svg {

  fill: currentColor;

  position: relative;

  top: 7px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

  .navbar-nav {

    gap: 0.5rem;

    align-items: flex-start;

  }


  .navbar .navbar-brand img {

    height: 40px;

  }


  .navbar .navbar-brand + img {

    height: 26px;

  }

}


@media (max-width: 767.98px) {

  .games-wrapper {

    padding: 35px 0 45px;

  }


  .game-card .card-body {

    padding: 1.35rem 1.25rem 1.4rem;

  }


  .theme-name {

    min-height: 0;

    font-size: 1.35rem;

  }


  .game-date {

    font-size: 1.05rem;

  }


  .game-opponent {

    font-size: 1.2rem;

  }


  .game-time {

    font-size: 1rem;

  }


  .govx-wrapper {

    padding: 40px 0;

  }

}

/* =========================================================
   SOLD OUT IMAGE OVERLAY
========================================================= */

.game-image-wrapper {
  position: relative;
  overflow: hidden;
}


/* Apply this class when an event is sold out */

.game-image-wrapper.sold-out::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 47, 77, 0.72);
  z-index: 2;
}


/* SOLD OUT label */

.game-image-wrapper.sold-out::after {
  content: "SOLD OUT";

  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%) rotate(-6deg);

  z-index: 3;

  color: #ffffff;
  background-color: #6f263d;

  border: 3px solid #ffffff;

  padding: 0.6rem 1.4rem;

  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1;

  font-weight: 900;
  letter-spacing: 0.08em;

  white-space: nowrap;

  box-shadow: 0 5px 18px rgba(0,0,0,0.3);
}


/* Slightly mute sold-out artwork */

.game-image-wrapper.sold-out img {
  filter: grayscale(35%);
}